<template>
    <div class="todo-bottom" v-show="Total">
        <div class="complete" >
            <label>
            <input type="checkbox" v-model="isAll"/>
            </label>
            <span>
                <span>已完成{{doneTotal}}</span> /全部{{todoList.length}}
            </span>
        </div>
        <button class="btn-danger" @click="clearAll">清除已完成任务</button>
    </div>
</template>

<script>
export default {
    name:"Bottom",
    data(){
        return {
            checked:false,
            }
        },
    props:['todoList'],
    methods:{
        clearAll(){
            this.$bus.$emit("clearAllTodo")
        },
    },
    computed: {
        doneTotal(){
            //reduce函数
            //pre是每次调用上一次的返回值
            //current是todolist数组的每个元素，即每个todo项
            return this.todoList.reduce((pre,current)=>pre+(current.done ? 1:0),0)
        },
        isAll:{
            get(){
                 return this.doneTotal === this.todoList.length && this.doneTotal > 0;
            },
            set(checked){
                this.$bus.$emit("checkAllTodo",checked);    
            }
        },
        Total(){
            return this.todoList.length;
        }
    },
}
</script>

<style>

    .todo-bottom{
        position:relative;
        top:70px;
        left:-58px;
        outline:none;
        border-radius: 13px;
        border: 1px solid #c8cccf;
        width:500px;
        height: 50px;
        box-shadow:#c8cccf 0px 0px 8px 1px;
    }
    .todo-bottom:hover{
        background-color: whitesmoke;
    }
    .btn-danger{
        background-color: rgb(255, 123, 0);
        color:white;
        font-weight: 600;
        position:relative;
        left: 330px;
        top:-11.7px;
        height: 32px;
        width: 150px;
        border-radius: 12px;
        font-size:14px;
        border: none;
        box-shadow:rgb(192, 181, 161) 0px 1px 2px 2px;
    }
    .btn-danger:active{
        box-shadow:rgb(192, 181, 161) 0px 0px 0px 0px;
    }
    .complete{
        position: relative;
        left:30px;
        width: 150px;
        top:14px;
        font-size:16px
    }
</style>